$bg-color: #E1E1E1;
$myBlue: #205099;
$myGreen: #008400;
$font-color: #FFFFFF;

body {
	margin-bottom: 0;
	background-image: url("../../images/bg-body.jpg");
	background-attachment: fixed;
	background-color: $bg-color;
	color: $font-color;
	font-family: arial;

	h1 {
    	font-size: 30px;
    	color: #ffffff;
	}

	textarea {
		font-size: 11px;
		background-color: transparent;
		width: 156px;
		height: 100px;
		border: none;
		color: #ffffff;
	}

	#fixedHeaderLayer {
	    position: fixed;
	    left: 0;
	    right: 0;
	    top: 0;
	    z-index: 100;
	    height: 16px;
	    background-color: #000000;
	}

	header {
		position: fixed;
	    right: 0;
	    left: 0;
	    z-index: 100;
		margin: 0 10px;
		min-height: 70px;
	    min-width: 900px;
	    box-shadow: 0 1px 6px black;
		background-color: $myBlue;
		padding: 10px 0;
	    /*font-size: 13px;*/

		#logo {
			float: left;
			width: 172px;
			height: 78px;
			background: transparent url("../../images/nf-logo.png");
			background-size: auto 100%;
			background-repeat: no-repeat;
			
		}

		#main-login {
			float: right;
			margin: 25px;

			.login-button {
				display: block;
				padding: 10px 10px;
				width: 203px;
	    		border-radius: 8px;
	    		text-align: center;
	    		font: bolder 14px arial;
				background-color: rgba(0, 0, 0, 0.7);
	    		
	    		span {
	    			color: $myGreen
	    		}
			}

			&:hover > #login-box {
				display: block;
			}

			#login-box {
				display: none;
				top: 57px;
				padding: 10px;
				position: absolute;
				width: 203px;
				min-height: 100px;
				border-radius: 0 0 8px 8px;
				font: bolder 12px arial;
				color: $myBlue;
				background: #ffffff;
			}

		}

		#search-box {
			float: right;
			background-color: #ffffff;
			margin-top: 20px;
			margin-right: 20px;
			border-top: 1px solid #5C5C5C;
			border-left: 1px solid #5C5C5C;
			#global-search {

				#searchField {
					display: inline-block;
					border: none;
					font-size: 14px;
					margin: 0;
					outline: none;
					padding: 10px;
					vertical-align: middle;
					background-color: transparent;
					vertical-align: middle;
					width: 222px;
					height: 5px;
					line-height: 20px;
					color: #666;
				}

				button {
					background: transparent url(http://cdn-0.nflximg.com/en_us/ffe/headers/header_icons_sprite.png) 2px -30px no-repeat;
					height: 20px;
					overflow: hidden;
					padding: 0;
					text-indent: -9999px;
					width: 16px;
					border: none;
					cursor: pointer;
				}

			}

		}

		h1 {
			text-align: center;
			display: inline;
			margin-left: 400px;
		}
	}

	article.home-page {
		margin: 0 auto;
    	position: relative;
    	top: 259px;
   	 	width: 228px;
	}

	article {

	    clear: both;
	    display: block;

		#wrapper {
		width: 900px;
		top: 150px;
		left: 0;
		margin: auto;
		position: relative;

			.jcarousel-skin-tango .jcarousel-container {
			    -moz-border-radius: 10px;
			    -webkit-border-radius: 10px;
			   border-radius: 10px;
			   background: rgba(0, 0, 0, 0.8);
			   border: 1px solid #ccc;
			}

			.jcarousel-skin-tango .jcarousel-direction-rtl {
				direction: rtl;
			}

			.jcarousel-skin-tango .jcarousel-container-horizontal {
			    width: 870px;
			    padding: 20px 40px;
			}

			.jcarousel-skin-tango .jcarousel-container-vertical {
			    width: 75px;
			    height: 236px;
			    padding: 40px 20px;
			}

			.jcarousel-skin-tango .jcarousel-clip {
			    overflow: hidden;
			}

			.jcarousel-skin-tango .jcarousel-clip-horizontal {
			    width:  870px;
			    height: 236px;
			}

			.jcarousel-skin-tango .jcarousel-clip-vertical {
			    width:  75px;
			    height: 245px;
			}

			.jcarousel-skin-tango .jcarousel-item {
			    width: 166px;
			    height: 236px;

			    img {
				    width: 166px;
				    height: 236px;
			    }
    			.popup {
    				width: 156px;
    				padding: 2px;
    				margin-right: 20px;
    				background: rgba(0, 0, 0, 0.8);
			   		border: 1px solid #ccc;
			   		border-radius: 10px;
				    position: relative;
				    display: none;
				    clear: both;
				    font-size: 11px;
				    z-index: 999;

				    a {
				    	color: #ffffff;
				    	text-decoration: none;
				    }
				    a:hover {
				    	color: #205099;
				    }
				}
			}

			.jcarousel-skin-tango .jcarousel-item-horizontal {
				margin-left: 0;
			    margin-right: 10px;
			}

			.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
				margin-left: 10px;
			    margin-right: 0;
			}

			.jcarousel-skin-tango .jcarousel-item-vertical {
			    margin-bottom: 10px;
			}

			.jcarousel-skin-tango .jcarousel-item-placeholder {
			    background: #fff;
			    color: #000;
			}

			/**
			 *  Horizontal Buttons
			 */
			.jcarousel-skin-tango .jcarousel-next-horizontal {
			    position: absolute;
			    top: 90px;
			    right: 5px;
			    width: 32px;
			    height: 32px;
			    cursor: pointer;
			    background: transparent url(../../images/next-horizontal.png) no-repeat 0 0;
			}

			.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
			    left: 5px;
			    right: auto;
			    background-image: url(../../images/prev-horizontal.png);
			}

			.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
			.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
			    background-position: -32px 0;
			}

			.jcarousel-skin-tango .jcarousel-next-horizontal:active {
			    background-position: -64px 0;
			}

			.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
			.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
			.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
			.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
			    cursor: default;
			    background-position: -96px 0;
			}

			.jcarousel-skin-tango .jcarousel-prev-horizontal {
			    position: absolute;
			    top: 90px;
			    left: 5px;
			    width: 32px;
			    height: 32px;
			    cursor: pointer;
			    background: transparent url(../../images/prev-horizontal.png) no-repeat 0 0;
			}

			.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
			    left: auto;
			    right: 5px;
			    background-image: url(../../images/next-horizontal.png);
			}

			.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
			.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
			    background-position: -32px 0;
			}

			.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
			    background-position: -64px 0;
			}

			.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
			.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
			.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
			.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
			    cursor: default;
			    background-position: -96px 0;
			}

			/**
			 *  Vertical Buttons
			 */
			.jcarousel-skin-tango .jcarousel-next-vertical {
			    position: absolute;
			    bottom: 5px;
			    left: 43px;
			    width: 32px;
			    height: 32px;
			    cursor: pointer;
			    background: transparent url(../../images/next-vertical.png) no-repeat 0 0;
			}

			.jcarousel-skin-tango .jcarousel-next-vertical:hover,
			.jcarousel-skin-tango .jcarousel-next-vertical:focus {
			    background-position: 0 -32px;
			}

			.jcarousel-skin-tango .jcarousel-next-vertical:active {
			    background-position: 0 -64px;
			}

			.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
			.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
			.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
			.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
			    cursor: default;
			    background-position: 0 -96px;
			}

			.jcarousel-skin-tango .jcarousel-prev-vertical {
			    position: absolute;
			    top: 5px;
			    left: 43px;
			    width: 32px;
			    height: 32px;
			    cursor: pointer;
			    background: transparent url(../../images/prev-vertical.png) no-repeat 0 0;
			}

			.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
			.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
			    background-position: 0 -32px;
			}

			.jcarousel-skin-tango .jcarousel-prev-vertical:active {
			    background-position: 0 -64px;
			}

			.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
			.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
			.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
			.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
			    cursor: default;
			    background-position: 0 -96px;
			}


			.content-collection {
				width: 100%;
				min-height: 100px;
				height: 100%;
			}

			.slogan {
				width: 100%;
				height: auto;
				padding: 5px 0;
	    		outline: 0 none;
				bottom: 0px;
				background-color: rgba(0, 0, 0, 0.8);
				font-size: 18px;
				text-align: center;
				border-radius: 10px;
			}

			.video-coming {
				text-align: center;
				font-size: 16px;

			    a {
			    	color: #ffffff;
			    	text-decoration: none;
			    }
			    a:hover {
			    	color: #205099;
			    }
			}

			.gallery-container {
				margin-bottom: 70px;
			}

			#results-message {
				font-size: 20px;
				text-align: center;
				padding: 80px 10px;
				background-color: rgba(0, 0, 0, 0.8);
				border-radius: 10px;
			}

		}	


	}
	
	footer {
		width: 98%;
		height: auto;

		position: fixed;
		bottom: 0px;
		margin-top: 20px;
		color: $font-color;
		font-size: 12px;
		display: block;
		clear: both;
		text-align: center;
		background-color: #000;
		padding: 10px;
		
	}

}
